<!--单条提醒消息-->

<script lang="tsx" setup>

import {type Notice, NoticeType} from "../../network/types/Notice.ts";
import UserRoute from "../routes/UserRoute.vue";
import TopicReadRoute from "../routes/TopicReadRoute.vue";
import DateTime from "../common/DateTime.vue";
import {toRefs} from "vue";
import MessageRoute from "../routes/MessageRoute.vue";

interface Props {
  notice: Notice
}

const props = defineProps<Props>()
const {notice} = toRefs(props)

const fromUser = () =>
    <UserRoute user-id={notice.value.fromUid} username={notice.value.fromUname}>{notice.value.fromUname}</UserRoute>
const sourceTopic = () => <TopicReadRoute tid={notice.value.aboutId} class="notice-link">{notice.value.text}</TopicReadRoute>
const sourceReply2 = () => <TopicReadRoute pid={notice.value.aboutId2} to={1} class="notice-link">[回复]</TopicReadRoute>
const sourceReply3 = () => <TopicReadRoute pid={notice.value.aboutId3} to={1} class="notice-link">[回复]</TopicReadRoute>
const priMsg = () => <MessageRoute mid={notice.value.aboutId!!} class="notice-link">[私信]</MessageRoute>
</script>

<template>
  <date-time :time="notice.time"/>
  <span :class="notice.unread?'bold':''" style="margin-left: 10px" @click="notice.unread=false">
    <span v-if="notice.type===NoticeType.REPLY_TOPIC">
      <fromUser/>
      <sourceReply2/>
      了你的主题
      <sourceTopic/>
    </span>

    <span v-else-if="notice.type===NoticeType.REPLY_REPLY">
      <fromUser/>
      <sourceReply2/>
      了你在主题
      <sourceTopic/>
      中的
      <sourceReply3/>
    </span>

    <span v-else-if="notice.type===NoticeType.UPVOTE">
      你在主题
      <sourceTopic/>
      中的
      <sourceReply2/>
      赞数提升了
    </span>
    <span v-else-if="notice.type===NoticeType.MENTION_TOPIC">
      <fromUser/>
      在主题
      <sourceTopic/>
      中@了你
    </span>
    <span v-else-if="notice.type===NoticeType.MENTION_REPLY">
      <fromUser/>
      在主题
      <sourceTopic/>
      的
      <sourceReply2/>
      中@了你
    </span>
    <span v-else-if="notice.type===NoticeType.MESSAGE_REPLY">
      <fromUser/>
      回复了
      <priMsg/>
    </span>
    <span v-else-if="notice.type===NoticeType.MESSAGE_NEW">
      <fromUser/>
      发起了
      <priMsg/>
    </span>
    <span v-else-if="notice.type===NoticeType.RECOMMEND_POST">
      <fromUser/>
      评价了你在主题
      <sourceTopic/>
      的
      <sourceReply2/>
      并使用了道具
    </span>

    <span v-else>{{ notice }}</span>
  </span>
</template>

<style scoped>

</style>